/* eslint-disable import/no-dynamic-require */
/* eslint-disable global-require */
/* eslint-disable react/no-array-index-key */
import classnames from 'classnames';
import React, { useMemo, useState } from 'react';
import { useHistory, useParams } from 'react-router-dom';
import { NavBar, Tabs, Icon, Flex, WhiteSpace, Menu } from 'antd-mobile';

// skill
import Hero from 'modules/eox/json/skill/Hero.json';
import Paladin from 'modules/eox/json/skill/Paladin.json';
import Bushido from 'modules/eox/json/skill/Bushido.json';
import Medic from 'modules/eox/json/skill/Medic.json';
import Ranger from 'modules/eox/json/skill/Ranger.json';
import Gunner from 'modules/eox/json/skill/Gunner.json';
import DoctorMagus from 'modules/eox/json/skill/DoctorMagus.json';
import Highlander from 'modules/eox/json/skill/Highlander.json';
import Princess from 'modules/eox/json/skill/Princess.json';
import Shogun from 'modules/eox/json/skill/Shogun.json';
import Zodiac from 'modules/eox/json/skill/Zodiac.json';
import Shinobi from 'modules/eox/json/skill/Shinobi.json';
import Farmer from 'modules/eox/json/skill/Farmer.json';
import Swordsman from 'modules/eox/json/skill/Swordsman.json';
import NightSeeker from 'modules/eox/json/skill/NightSeeker.json';
import Mystic from 'modules/eox/json/skill/Mystic.json';
import Imperial from 'modules/eox/json/skill/Imperial.json';
import Cestvs from 'modules/eox/json/skill/Cestvs.json';
import Reaper from 'modules/eox/json/skill/Reaper.json';

import Professions from 'modules/eox/json/profession.json';
import Abilities from 'modules/eox/json/ability.json';
import Ability from 'entity/Ability';
import Skill from 'entity/Skill';
import { DivClickable } from 'components';
import SkillDesc from 'entity/SkillDesc';
import SkillComponent from './components/skill';
import SkillDrawer from './components/skill-drawer';
import styles from './professions-detail.module.less';

const skills = {
  Hero,
  Paladin,
  Bushido,
  Medic,
  Ranger,
  Gunner,
  DoctorMagus,
  Highlander,
  Princess,
  Shogun,
  Zodiac,
  Shinobi,
  Farmer,
  Swordsman,
  NightSeeker,
  Mystic,
  Imperial,
  Cestvs,
  Reaper,
};

/** 职业详情 */
function ProfessionsDetailFC() {
  const params = useParams<{ profession?: string; }>();
  const history = useHistory();
  // tab
  const tabs = [
    { title: '能力傾向', sub: '1' },
    { title: '技能列表', sub: '2' },
    { title: '立绘', sub: '3' },
  ];

  // 技能弹出框
  const [active, setActive] = useState<string>('');
  // 职业技能
  const [perfessionSkills, setPerfessionSkills] = useState<any>();
  const [skill, setSkill] = useState<SkillDesc>();

  // 职业
  const prefession = useMemo(() => {
    if (params.profession) {
      // 加载直接技能树
      setPerfessionSkills(
        require(`modules/eox/json/skill-desc/${params.profession}`),
      );
      const p = Professions.filter((o) => o.english === params.profession)[0];
      return p;
    }
    // 获取技能
    return null;
  }, [params.profession]);

  // 职业菜单
  const ref = React.createRef<HTMLDivElement>();
  const [open, isOpen] = useState<boolean>(false);
  const PrefessionMenus = Professions.map((o) => ({ value: o.english, label: `${o.name}-${o.english}-${o.origin}` }));

  return (
    <div className={styles.root}>
      <NavBar
        icon={<Icon type="left" />}
        rightContent={(
          <DivClickable onClick={() => {
            isOpen(!open); setActive('');
            // 默认切换tab时滚动到最左侧
            if (!open) {
              ref.current.scrollLeft = 0;
            }
          }}
          >
            切换
          </DivClickable>
        )}
        onLeftClick={() => history.goBack()}
      >
        {prefession?.name}
      </NavBar>
      <SkillDrawer
        active={active}
        skill={skill}
        onClose={() => {
          setActive('');
        }}
      />
      <Menu
        className={classnames(styles.menus, { hidden: !open })}
        height={document.documentElement.clientHeight - 45}
        data={PrefessionMenus}
        value={[params.profession]}
        level={1}
        onChange={(item) => {
          history.replace(`/detail/${item[0]}`);
          isOpen(false);
        }}
      />
      <div className={styles.tabContainer}>
        <Tabs
          tabs={tabs}
          initialPage={0}
          tabBarPosition="top"
          swipeable={false}
          onChange={() => { setActive(''); }}
        >
          <div>
            <WhiteSpace size="md" />
            <Flex className={styles.row}>
              <Flex.Item>Lv</Flex.Item>
              <Flex.Item>HP</Flex.Item>
              <Flex.Item>TP</Flex.Item>
              <Flex.Item>STR</Flex.Item>
              <Flex.Item>INT</Flex.Item>
              <Flex.Item>VIT</Flex.Item>
              <Flex.Item>WIS</Flex.Item>
              <Flex.Item>AGI</Flex.Item>
              <Flex.Item>LUC</Flex.Item>
            </Flex>
            {
              Abilities[params.profession]
                ?.map((ability) => new Ability(ability))
                ?.map((ability: Ability) => (
                  <Flex className={styles.row} key={ability.id}>
                    <Flex.Item>{ability.lv}</Flex.Item>
                    <Flex.Item>{ability.hp}</Flex.Item>
                    <Flex.Item>{ability.tp}</Flex.Item>
                    <Flex.Item>{ability.str}</Flex.Item>
                    <Flex.Item>{ability.int}</Flex.Item>
                    <Flex.Item>{ability.vit}</Flex.Item>
                    <Flex.Item>{ability.wis}</Flex.Item>
                    <Flex.Item>{ability.agi}</Flex.Item>
                    <Flex.Item>{ability.luc}</Flex.Item>
                  </Flex>
                ))
            }
          </div>
          <div ref={ref} className={classnames(styles.skillContainer, 'ft-12')}>
            <div className={styles.stageContainer}>
              <div className={classnames(styles.stage, styles.novice, 'pd-4 text-center')}>
                NOVICE
              </div>
              <div className={classnames(styles.stage, styles.veteran, 'pd-4 text-center')}>
                VETERAN
              </div>
              <div className={classnames(styles.stage, styles.master, 'pd-4 text-center')}>
                MASTER
              </div>
            </div>
            {
              skills[params.profession]?.map((o: Skill[], i) => (
                <React.Fragment key={i}>
                  <WhiteSpace size="md" />
                  <div className="df" key={i}>
                    {o.map((p, j) => (
                      <SkillComponent
                        active={active}
                        key={`${p.name}`}
                        name={p.name}
                        suffix={p.suffix}
                        require={p.require}
                        stage={p.stage}
                        adjust={p.adjust}
                        size={p.size}
                        extra={p.extra}
                        onClick={() => setActive((name) => {
                          if (name === p.name) {
                            return '';
                          }
                          setSkill(perfessionSkills[p.name]);
                          return p.name;
                        })}
                      />
                    ))}
                  </div>
                </React.Fragment>
              ))
            }
          </div>
          <div className={classnames(styles[params.profession])} />
        </Tabs>
      </div>
    </div>
  );
}

export default ProfessionsDetailFC;
